%logo-color {
  opacity: 1.0;

  path.text {
    fill: $black;
    opacity: 1.0;
  }

  path.rect-light {
    fill: #5C4EE5;
    opacity: 1.0;
  }

  path.rect-dark {
    fill: #4040B2;
    opacity: 1.0;
  }
}

%logo-white {
  opacity: 1.0;

  path.text {
    fill: $white;
  }

  path.rect-light {
    fill: $white;
    opacity: 1.0;
  }

  path.rect-dark {
    fill: $white;
    opacity: 0.7;
  }
}

svg.logo {
  // The default logo class is the colored version
  @extend %logo-color;
  &.color { @extend %logo-color; }
  &.white { @extend %logo-white; }
}
